<script setup>
	import {
		defineProps
	} from "vue"

	const optionLabel = ['A', 'B', 'C', 'D']
	const props = defineProps({
		data: Object
	})

	const onClickCheck = (i) => {
		if (props.data.options[i].answer === 1) {
			return
		}
		props.data.options.forEach((v, ii) => {
			v.answer = i === ii ? Number(!v.answer) : 0
		})
		props.data.isEdit = true
	}
</script>

<template>
	<view style="padding: 20rpx 0;">
		<label class="q-type">单选题</label>
	</view>
	<view style="padding: 10rpx;">
		<view style="height: 40rpx;"></view>
		<uv-parse :content="data.content"></uv-parse>
		<view style="height: 40rpx;"></view>
		<view class="q-option" v-for="(item, index) in data.options" :key="index" @click="onClickCheck(index)"
			:class="{'q-option-check': item.answer === 1}">
			<view>{{optionLabel[index]}}、</view>
			<uv-parse :content="item.label"></uv-parse>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.q-type {
		color: white;
		background-color: #6f95c2;
		padding: 14rpx;
	}

	.q-option {
		border: 2rpx solid #b8b8b8;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		margin-bottom: 18rpx;
		padding: 18rpx;
		display: flex;
	}

	.q-option-check {
		color: #6f95c2;
		border: 2rpx solid #6f95c2;
		background-color: #e9f2fc;
	}
</style>